<!DOCTYPE html>
<html class="x-admin-sm">

<head>
    <meta charset="UTF-8">
    <title></title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <!-- <link rel="stylesheet" href="./css/font.css"> -->
    <link rel="stylesheet" href="./css/xadmin.css">
    <script src="./lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="./js/xadmin.js"></script>
    <!--[if lt IE 9]>
          <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
          <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->
</head>
<style>
    .coutent .box {
        width: 300px;
        height: 90px;
        border-radius: 8px;
    }
    
    .userlist-row {
        display: flex;
        line-height: 40px;
        border-bottom: 1px dashed #eee;
        font-size: 14px;
    }
    
    .pd {
        padding: 0 15px;
    }
    
    .userlist-row :nth-child(1) {
        width: 30%;
    }
    
    .userlist-row :nth-child(2) {
        width: 20%;
    }
    
    .userlist-row :nth-child(3) {
        width: 50%;
    }
    
    .artList-row {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        line-height: 40px;
        border-bottom: 1px dashed #eee;
        font-size: 14px;
    }
</style>

<body>
    <div class="x-nav">
        <span class="layui-breadcrumb">
            <a href="">后台首页</a>
        </span>
        <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" onclick="location.reload()" title="刷新">
            <i class="layui-icon layui-icon-refresh" style="line-height:30px"></i></a>
    </div>
    <div class="coutent" style="padding: 10px;">

        <div class="userbox" style="width: 1274px;height: 90px;   display: flex; justify-content: space-around;">
            <div class="box" style="background-color: #fb6d49; text-align: center; font-size: 14px; color: #fff;">
                <p style="margin-top: 20px;">管理员用户</p>
                <span id="admin_num">123</span><span>名</span>
            </div>
            <div class="box" style="background-color: #67c23a; text-align: center; font-size: 14px; color: #fff;">
                <p style="margin-top: 20px;">平台注册用户</p>
                <span id="reg_num">123</span><span>名</span>
            </div>
            <div class="box" style="background-color: #e6a23c; text-align: center; font-size: 14px; color: #fff;">
                <p style="margin-top: 20px;">平台文章总数</p>
                <span id="art_num">123</span><span>篇</span>
            </div>
            <div class="box" style="background-color: #3a7ce7; text-align: center; font-size: 14px; color: #fff;">
                <p style="margin-top: 20px;"></p>
                <p>
                    <span>广告位</span> <span id="adv_num"></span><span>个</span>
                </p>
                <p>
                    <sapn>广告图</sapn> <span id="adv_pic_num"></span><span>个</span>
                </p>
            </div>
        </div>


        <div class="center" style="width: 1274px;height: 352px;  display: flex; justify-content: space-around; margin-top: 10px;">
            <div class="item" style="width: 33.33333%; border-radius: 8px;">
                <div class="title" style="    background-color: #ddd;
                line-height: 44px; height: 44px;
                box-sizing: border-box;
                padding: 0 15px; font-size: 15px;">
                    最新注册新用户
                </div>
                <div class="pd" id="new_user" style="height:280px; background-color: #fff; ">

                </div>


            </div>
            <div class="item" style="width: 28.33333%; border-radius: 8px;">
                <div class="title" style="    background-color: #ddd;
                line-height: 44px; height: 44px;
                box-sizing: border-box;
                padding: 0 15px; font-size: 15px;">
                    点赞文章排行
                </div>
                <div class="pd" id="art_top" style="height:280px; background-color: #fff; ">

                </div>
            </div>
            <div class="item" style="width: 33.33333%; border-radius: 8px;">
                <div class="title" style="    background-color: #ddd;
                line-height: 44px; height: 44px;
                box-sizing: border-box;
                padding: 0 15px; font-size: 15px;">
                    用户性别分析
                </div>
                <div id="echarts" style="height:280px; background-color: #fff; "></div>
            </div>
        </div>

        <div id="art_class" class="art_class" style="width: 1259px;height: 400px; background-color: #fff;">

        </div>
    </div>

    <!-- 新用户统计模板 -->
    <script type="text/html" id="new_user_tpl">
        {{each new_user}}
        <div class="userlist-row">
            <div>{{$value.username}}</div>
            <div>{{$value.sex == '1' ? '女' : '男'}}</div>
            <div>{{$value.address}}</div>
        </div>
        {{/each}}
    </script>

    <!-- 文章统计模板 -->
    <script type="text/html" id="art_list_tpl">
        {{each hot_article}}
        <div class="artList-row">
            {{$value.title}}
        </div>
        {{/each}}
    </script>


</body>
<script src="/js/template-web.js"></script>
<script src="/js/jquery.min.js"></script>
<script src="/js/echarts.min.js"></script>
<script src="/js/baseAPI.js"></script>
<script src="/js/welcome.js"></script>

</html>